/*!
 * ---------------------------------------------------------------------
 *
 * GLPI - Gestionnaire Libre de Parc Informatique
 *
 * http://glpi-project.org
 *
 * @copyright 2015-2024 Teclib' and contributors.
 * @copyright 2003-2014 by the INDEPNET Development Team.
 * @licence   https://www.gnu.org/licenses/gpl-3.0.html
 *
 * ---------------------------------------------------------------------
 *
 * LICENSE
 *
 * This file is part of GLPI.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * ---------------------------------------------------------------------
 */

/**
 * Styles for inputs that are disguised as "content editable" DOM elements
 * This inputs may be more convenient than real "content-editable" elements for
 * some use cases (richtext editor, ...)
 */

// Padding for content-editable inputs
// Must not be too high as content-editable is usually done without padding
$inline-input-padding: 2px 4px;

.content-editable-h1 {
    // Copy h1 styles
    font-size: 1.6rem !important;
    line-height: 1.5rem;
    font-weight: var(--tblr-font-weight-medium);
    border: 0;
    padding: $inline-input-padding;
    margin-bottom: 1.1rem;
    background-color: transparent;
    box-shadow: none;
}

.content-editable-h2 {
    // Copy h2 styles
    font-size: 1.2rem !important;
    line-height: 1.5rem;
    font-weight: var(--tblr-font-weight-medium);
    border: 0;
    padding: $inline-input-padding;
    margin-bottom: 1rem;
    background-color: transparent;
    box-shadow: none;
}

.content-editable-tinymce {
    // Remove default border and padding, add similar hover style used on our inputs
    .tox-tinymce {
        border-color: transparent !important;
        padding: $inline-input-padding;
    }

    // Status bar is empty here, do not display to gain some vertical space
    .tox-statusbar {
        display: none !important;
    }

    // Small left padding to match our content-editable inputs padding
    .tox-toolbar__primary {
        .tox-toolbar__group:first-child {
            padding-left: 2px !important;
        }
    }

    // Hide richtext actions toolbor
    .tox-editor-header {
        // Can't use "display: none" as tinymce doens't like it and it break
        // the rendering of the header (probably caused by some calculations done
        // on width)
        opacity: 0;
        height: 0 !important;
        transition: height 0.25s ease !important;
        padding: 0 !important;
    }

    // Override some hard-set tinymce margins
    .tox-sidebar-wrap {
        margin-bottom: -20px;
    }

    // Do not display file upload summary as it will only contains pasted images
    .fileupload {
        display: none;
    }
}

// Simulate focus like a bootstrap input, needed for tinymce with some javascript
// help to trigger and remove the class as needed
form:not(.disable-focus) {
    .simulate-focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.20);

        // Show richtext toolbar only when focused
        .tox-editor-header {
            opacity: unset;
            height: 48px !important; // Need to set a fixed height for transition
            transition: height 0.25s ease !important;
            margin-top: 1rem !important;
            padding: 4px !important;
        }

        // Partial revert of margin change in this case as we want to keep the
        // natural margin while the toolbar is visible
        .tox-sidebar-wrap {
            margin-bottom: -5px;
        }
    }
}

// Class inside tinymce's iframe, remove internal padding
.content-editable-tinymce-editor {
    margin: 0 !important;
    padding: 0 !important;

    // Remove margin after final paragraph
    p:last-child {
        margin-bottom: 0 !important;
    }

    // Show correct cursor on tinymce's placeholders
    &[data-mce-placeholder] {
        cursor: text !important;
    }
}
